<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getAllBuildingService, addBuildingService, deleteBuildingService, updateBuildingService } from '@/api/building'
import { getAllDepartmentService, addDepartmentService, deleteDepartmentService, updateDepartmentService } from '@/api/department'

//---楼栋信息

const buildingTableData = reactive([])

async function getAllBuilding() {
    buildingTableData.length = 0
    let result = await getAllBuildingService()
    for (let i = 0; i < result.data.length; i++) {
        buildingTableData.push(result.data[i])
    }
}
getAllBuilding()

const addForm = reactive({
    building: '',
    unitCount: null,
    floorCount: null,
    roomCount: null
})

const dialogFormVisible = ref(false)

const checkBuilding = (rule, value, cb) => {
    const regBuilding = /^[A-Za-z0-9]+$/;
    if (regBuilding.test(value)) {
        return cb();
    }
    //手机号不合法
    cb(new Error('请输入字母或数字！'));
}

const rules = {
    building: [
        { required: true, message: '不可为空！', trigger: 'blur' },
        { validator: checkBuilding, trigger: ['blur', 'change'] }
    ],
    unitCount: [{ required: true, message: '不可为空！', trigger: 'blur' }],
    floorCount: [{ required: true, message: '不可为空！', trigger: 'blur' }],
    roomCount: [{ required: true, message: '不可为空！', trigger: 'blur' }]
}

const addBuilding = async () => {
    await addBuildingService(addForm)
    dialogFormVisible.value = false
    ElMessage.success("添加成功")
    getAllBuilding()
    addForm.value = { building: '', unitCount: null, floorCount: null, roomCount: null }
}

const deleteBuilding = async (building) => {
    await deleteBuildingService(building)
    ElMessage.success("删除成功")
    getAllBuilding()
}

const updateDialogFormVisible = ref(false)

const updateForm = reactive({
    building: '',
    unitCount: null,
    floorCount: null,
    roomCount: null
})

const handleEdit = (row) => {
    // console.log(row.building)
    updateForm.building = row.building
    updateForm.unitCount = row.unitCount
    updateForm.floorCount = row.floorCount
    updateForm.roomCount = row.roomCount
    updateDialogFormVisible.value = true
}

const updateBuilding = async () => {
    await updateBuildingService(updateForm)
    ElMessage.success("修改成功")
    updateDialogFormVisible.value = false
    getAllBuilding()
    updateForm.building = ''
    updateForm.unitCount = null
    updateForm.floorCount = null
    updateForm.roomCount = null
}

//--------------部门信息-----------------------

const departmentTableData = reactive([])

async function getAllDepartment() {
    departmentTableData.length = 0
    let result = await getAllDepartmentService()
    for (let i = 0; i < result.data.length; i++) {
        departmentTableData.push(result.data[i])
    }
}
getAllDepartment()

const departmentDialogFormVisible = ref(false)

const rules2 = {
    department: [{ required: true, message: '不可为空！', trigger: 'blur' }]
}

const newDepartment = ref()

const addDepartment = async () => {
    await addDepartmentService(newDepartment.value)
    departmentDialogFormVisible.value = false
    ElMessage.success("添加成功")
    getAllDepartment()
    newDepartment.value = ''
}

const deleteDepartment = async (id) => {
    await deleteDepartmentService(id)
    ElMessage.success("删除成功")
    getAllDepartment()
}

const departmentUpdateDialogFormVisible = ref(false)

const departmentUpdateForm = reactive({
    id: null,
    department: ''
})

const handleEdit2 = (row) => {
    // console.log(row.building)
    departmentUpdateForm.id = row.id
    departmentUpdateForm.department = row.department
    departmentUpdateDialogFormVisible.value = true
}

const updateDepartment = async () => {
    await updateDepartmentService(departmentUpdateForm.id, departmentUpdateForm.department)
    ElMessage.success("修改成功")
    departmentUpdateDialogFormVisible.value = false
    getAllDepartment()
    departmentUpdateForm.value = { id: null, department: '' }
}
</script>



<template>
    <div style="display: flex;">
        <!-- 楼栋信息表格 -->
        <div style="padding:20px;">
            <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
                <el-button type="primary" @click="dialogFormVisible = true"
                    style="width: 100px;background-color: rgb(19, 179, 232);color: white;"
                    :size="large">添加楼栋信息</el-button>
            </div>
            <el-table :data="buildingTableData" border stripe style="min-width: 800px;">
                <el-table-column label="楼栋" prop="building" sortable />
                <el-table-column label="单元数量" prop="unitCount" />
                <el-table-column label="楼层数" prop="floorCount" />
                <el-table-column label="每层房间数" prop="roomCount" />
                <el-table-column label="操作" align="center" width='200px'>
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <!-- <el-button size="small" type="danger" @click="handleDelete(scope.row.building)">删除</el-button> -->
                        <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
                            icon-color="red" title="确认要删除此楼栋信息吗？" @confirm="deleteBuilding(scope.row.building)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 部门信息表格 -->
        <div style="padding:20px;margin-left: 40px;">
            <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
                <el-button type="primary" @click="departmentDialogFormVisible = true"
                    style="width: 80px;background-color: rgb(19, 179, 232);color: white;" :size="large">添加部门</el-button>
            </div>
            <el-table :data="departmentTableData" border stripe style="min-width: 500px;">
                <el-table-column label="ID" prop="id" sortable width="90px"/>
                <el-table-column label="部门名称" prop="department" />
                <el-table-column label="操作" align="center" width='200px'>
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit2(scope.row)">编辑</el-button>
                        <!-- <el-button size="small" type="danger" @click="handleDelete(scope.row.building)">删除</el-button> -->
                        <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="InfoFilled"
                            icon-color="red" title="确认要删除此部门信息吗？" @confirm="deleteDepartment(scope.row.id)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>


    <!-- 楼栋信息弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增楼栋信息" width="500">
        <el-form :model="addForm" label-width="120px" :rules="rules">
            <el-form-item label="楼栋号" prop="building">
                <el-input v-model="addForm.building" />
            </el-form-item>
            <el-form-item label="单元数量" prop="unitCount">
                <el-input-number v-model="addForm.unitCount" :min="1" :max="99" controls-position="right" />
            </el-form-item>
            <el-form-item label="楼层数" prop="floorCount">
                <el-input-number v-model="addForm.floorCount" :min="1" :max="99" controls-position="right" />
            </el-form-item>
            <el-form-item label="每层房间数" prop="roomCount">
                <el-input-number v-model="addForm.roomCount" :min="1" :max="99" controls-position="right" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addBuilding">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="updateDialogFormVisible" title="修改楼栋信息" width="500">
        <el-form :model="updateForm" label-width="120px" :rules="rules">
            <!-- <el-form-item label="楼栋号" prop="building">
                <el-input v-model="updateForm.building" />
            </el-form-item> -->
            <el-form-item label="单元数量" prop="unitCount">
                <el-input-number v-model="updateForm.unitCount" :min="1" :max="99" controls-position="right" />
            </el-form-item>
            <el-form-item label="楼层数" prop="floorCount">
                <el-input-number v-model="updateForm.floorCount" :min="1" :max="99" controls-position="right" />
            </el-form-item>
            <el-form-item label="每层房间数" prop="roomCount">
                <el-input-number v-model="updateForm.roomCount" :min="1" :max="99" controls-position="right" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateBuilding">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>


    <!-- 部门信息弹窗 -->
    <el-dialog v-model="departmentDialogFormVisible" title="新增部门信息" width="400">
        <el-form :model="newDepartment" label-width="120px" :rules="rules2">
            <el-form-item label="部门名称" prop="department">
                <el-input v-model="newDepartment" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addDepartment">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="departmentUpdateDialogFormVisible" title="修改部门信息" width="400">
        <el-form :model="departmentUpdateForm" label-width="120px" :rules="rules2">
            <el-form-item label="部门名称" prop="department">
                <el-input v-model="departmentUpdateForm.department" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="departmentUpdateDialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateDepartment">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>
